import './Voice.scss'
import Draggable from 'react-draggable'
import { Badge, Button } from 'antd'
import * as signalr from '@microsoft/signalr'
import { useEffect, useState, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { useKeyPress } from 'ahooks'
import { FrontModalBox } from '../../Pages/Front/Assets/Modal'

const 进入 = {
    首页: '/Front',
    AI管控: '/Front/Other/OneA01',
    事务督办: '/Front/Other/TwoA01',
    安全管控: '/Front/Other/ThrA01',
    成本管控: '/Front/Other/FouA01',
    财务管控: '/Front/Other/FivA01',
    智慧巡视: '/Front/Other/SixA01',
    指挥对讲: '/Front/Other/SixA01',
    视频监控: '/Front/Other/SixA02',
    无人机直播: '/Front/Other/SixA03',
    无人机航拍: '/Front/Other/SixA04',
    文件管理: '/Front/Other/SevA01',
    机械管控: '/Front/Other/EleA01',
    物资管控: '/Front/Other/NinA01',
    数据中台: '/Front/Other/TenA01',
    后台: '/Admin',
}

const 打开 = {
    预警视频: { type: 'CameraModal', data: { title: '正在监控的项目详情' } },
    工建简介: {
        type: 'APIAnnexModal',
        data: { title: '工建简介', type: 'JTGJHomeLeft', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
    },
    权属企业: { type: 'TableList', data: { title: '权属企业详情', type: 'JTGJHomeTopOne' } },
    在建项目: { type: 'TableList', data: { title: '项目详情', type: 'JTGJHomeTopTwo' } },
    在册员工: { type: 'TableList', data: { title: '在册人员详情', type: 'JTGJHomeLeft' } },
}
const 关闭 = {
    弹窗: { type: 'CloseModal' },
}
const 展开 = {
    系统设置: '2cca4883-69e8-4de5-bafd-d9f38212ef4d',
}
const 收起 = {
    系统设置: '2cca4883-69e8-4de5-bafd-d9f38212ef4d',
}
const 查看 = {
    首页: 'a0b4f6b8-ef44-4b43-925f-85a299eb52cb',
    组织机构管理: 'b6c2ac2f-8bc0-4826-a450-21bb68d0e803',
}

const Front = { 进入, 打开, 关闭 }
const Admin = { 进入, 展开, 收起, 查看 }

const A01Arr = {
    首页: '/Front',
    AI管控: '/Front/Other/OneA01',
    ai管控: '/Front/Other/OneA01',
    ai监管: '/Front/Other/OneA01',
    AI: '/Front/Other/OneA01',
    ai: '/Front/Other/OneA01',
    人工智能: '/Front/Other/OneA01',
    事务督办: '/Front/Other/TwoA01',
    安全管控: '/Front/Other/ThrA01',
    安全: '/Front/Other/ThrA01',
    成本管控: '/Front/Other/FouA01',
    成本: '/Front/Other/FouA01',
    财务管控: '/Front/Other/FivA01',
    财务: '/Front/Other/FivA01',
    智慧巡视: '/Front/Other/SixA01',
    巡视: '/Front/Other/SixA01',
    指挥对讲: '/Front/Other/SixA01',
    视频监控: '/Front/Other/SixA02',
    视频: '/Front/Other/SixA02',
    无人机直播: '/Front/Other/SixA03',
    无人机航拍: '/Front/Other/SixA04',
    文件管理: '/Front/Other/SevA01',
    文件: '/Front/Other/SevA01',
    文档: '/Front/Other/SevA01',
    机械管控: '/Front/Other/EleA01',
    机械: '/Front/Other/EleA01',
    物资管控: '/Front/Other/NinA01',
    物资: '/Front/Other/NinA01',
    数据中台: '/Front/Other/TenA01',
    数据: '/Front/Other/TenA01',
    中台: '/Front/Other/TenA01',
    后台: '/Admin',
}
const A02Arr = {
    预警视频: { type: 'CameraModal', data: { title: '正在监控的项目详情' } },
    工建简介: {
        type: 'APIAnnexModal',
        data: { title: '工建简介', type: 'JTGJHomeLeft', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
    },
    简介: {
        type: 'APIAnnexModal',
        data: { title: '工建简介', type: 'JTGJHomeLeft', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
    },
    公司简介: {
        type: 'APIAnnexModal',
        data: { title: '工建简介', type: 'JTGJHomeLeft', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
    },
    权属企业: { type: 'TableList', data: { title: '权属企业详情', type: 'JTGJHomeTopOne' } },
    在建项目: { type: 'TableList', data: { title: '项目详情', type: 'JTGJHomeTopTwo' } },
    项目: { type: 'TableList', data: { title: '项目详情', type: 'JTGJHomeTopTwo' } },
    在册员工: { type: 'TableList', data: { title: '在册人员详情', type: 'JTGJHomeLeft' } },
}

export const Voice = () => {
    const Navigate = useNavigate()
    const [init, setInti] = useState(false)
    const [Connection, setConnection] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const [message, setMessage] = useState()

    const [keyStatus, setKeyStatus] = useState(false)

    const filterKey = [
        'z',
        'x',
        'c',
        'h',
        'j',
        'k',
        'l',
        ';',
        "'",
        'b',
        'n',
        'm',
        ',',
        '.',
        'u',
        'i',
        'o',
        'p',
        '8',
        '9',
        '0',
        '-',
        '=',
        '`',
    ]
    useKeyPress(
        ({ key }) => filterKey.includes(key),
        ({ type, key }) => {
            if (type === 'keyup') {
                if (!keyStatus) return false
                if (!init) {
                    console.log('工建管家初始化中...')
                    return false
                }

                if (key === 'z') Connection.invoke('SendMessage', '|人工智能')
                if (key === 'x') Connection.invoke('SendMessage', '收起|系统设置')
                if (key === 'c') Connection.invoke('SendMessage', '查看|组织机构管理')

                if (key === '`') Connection.invoke('SendMessage', '进入|后台')
                if (key === 'h') Connection.invoke('SendMessage', '进入|首页')

                if (key === 'j') Connection.invoke('SendMessage', '进入|AI管控')
                if (key === 'k') Connection.invoke('SendMessage', '进入|事务督办')
                if (key === 'l') Connection.invoke('SendMessage', '进入|安全管控')
                if (key === ';') Connection.invoke('SendMessage', '进入|成本管控')
                if (key === "'") Connection.invoke('SendMessage', '进入|财务管控')
                if (key === 'n') Connection.invoke('SendMessage', '进入|智慧巡视')
                if (key === 'm') Connection.invoke('SendMessage', '进入|视频监控')
                if (key === ',') Connection.invoke('SendMessage', '进入|无人机直播')
                if (key === '.') Connection.invoke('SendMessage', '进入|无人机航拍')
                if (key === 'u') Connection.invoke('SendMessage', '进入|文件管理')
                if (key === 'i') Connection.invoke('SendMessage', '进入|机械管控')
                if (key === 'o') Connection.invoke('SendMessage', '进入|物资管控')
                if (key === 'p') Connection.invoke('SendMessage', '进入|数据中台')

                if (key === '8') Connection.invoke('SendMessage', '打开|预警视频')
                if (key === '9') Connection.invoke('SendMessage', '打开|工建简介')
                if (key === '0') Connection.invoke('SendMessage', '打开|权属企业')
                if (key === '-') Connection.invoke('SendMessage', '打开|在建项目')
                if (key === '=') Connection.invoke('SendMessage', '打开|在册员工')
            }
        },
        { events: ['keydown', 'keyup'] },
    )

    useEffect(() => {
        const myConnection = new signalr.HubConnectionBuilder()
            .withUrl('https://jtgj-rest.ljkjkf.com/wss/aiHub', {
                skipNegotiation: true,
                transport: signalr.HttpTransportType.WebSockets,
                accessTokenFactory: () => sessionStorage.getItem('TOKEN').split(' ')[1],
            })
            .build()
        setConnection(myConnection)
        return () => {
            myConnection.stop()
        }
    }, [])

    // const runFunc = useCallback(
    //     (path, run, fun) => {
    //         const isFront = path === 'Front' && Front.hasOwnProperty(run)
    //         const isAdmin = path === 'Admin' && Admin.hasOwnProperty(run)
    //         if (isFront) {
    //             const data = Front[run][fun]
    //             const FrontFunc = {
    //                 进入: data => Navigate(data),
    //                 打开: data => setOptionsCall({ ...data }),
    //                 关闭: data => setOptionsCall({ ...data }),
    //             }
    //             if (data && FrontFunc[run]) FrontFunc[run](data)
    //             else setMessage('指令无效,请确认')
    //         } else if (isAdmin) {
    //             const data = Admin[run][fun]
    //             const { SelectMenusEvent, OpenChangeEvent } = window
    //             const AdminFunc = {
    //                 进入: data => Navigate(data),
    //                 展开: data => OpenChangeEvent.emit({ type: 'open', value: data }),
    //                 收起: data => OpenChangeEvent.emit({ type: 'off', value: data }),
    //                 查看: data => SelectMenusEvent.emit(data),
    //             }
    //             if (data && AdminFunc[run]) AdminFunc[run](data)
    //             else setMessage('指令无效,请确认')
    //             setMessage(`${run} | ${fun}`)
    //         } else setMessage('指令无效,请确认')
    //     },
    //     [Navigate],
    // )

    const runFunc = useCallback(
        (path, run, fun) => {
            if (A01Arr.hasOwnProperty(fun)) {
                Navigate(A01Arr[fun])
            }
            if (A02Arr.hasOwnProperty(fun)) {
                setOptionsCall(A02Arr[fun])
            }
        },
        [Navigate],
    )

    useEffect(() => {
        if (Connection) {
            Connection.on('ReceiveMessage', message => {
                const [run, fun] = message.split('|')
                const [, path] = window.location.pathname.split('/')
                if (path) runFunc(path, run, fun)
                else setMessage('当前页面无法操作')
            })
            !init && Connection.start().then(() => setInti(true))
        }
    }, [Connection, init, runFunc])

    return (
        <>
            <Draggable>
                <div className="Voice">
                    <div className="status">
                        <Badge status={init ? 'success' : 'processing'} />
                        语音助手 {init ? '链接成功' : '链接中...'}
                    </div>
                    {message && <div>指令 : {message}</div>}
                    <Button block onClick={() => setKeyStatus(e => !e)}>
                        快捷键 ( {keyStatus ? '已启动' : '已关闭'} )
                    </Button>
                </div>
            </Draggable>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
